<template>
  <div class="books">
    <div class="banner">
      <img src="//fuss10.elemecdn.com/9/bf/67e9f3ea3c42164db1534dc53a7a4png.png?imageMogr/format/webp/thumbnail/686x/" alt="" width="100%">
    </div>
    <div class="detail">
      <ul class="menu">
        <li v-for="(item,index) in goodsList" :key="index">
          <img v-if="item.icon_url" :src="'//fuss10.elemecdn.com/'+item.icon_url+'.png?imageMogr/format/webp/thumbnail/26x/'" alt="">
          <span>{{item.name}}<i v-if="goodsList[index].goodNum && totalnum" class="icon_num">{{goodsList[index].goodNum}}</i></span>
        </li>
      </ul>
      <div class="scroll">
          <dl class="detail_right" v-for="(item,index) in goodsList" :key="index" >
            <dt>
              <span>{{item.name}}</span>
              <span v-if="item.description" class="description">{{item.description}}</span>
            </dt>
              <dd v-for="(fooditem,foodindex) in item.foods" :key="foodindex">
                <img :src="getImgUrl(fooditem)" alt="">
                <div class="food_list">
                  <h3 >{{fooditem.name}}</h3>
                  <p>
                    <span>月售{{fooditem.month_sales}}</span>
                    <span>好评率{{fooditem.satisfy_rate}}</span>
                  </p>
                  <div class="food_list_add">
                    <span class="price"><b>￥</b>{{fooditem.specfoods[0].price}}</span>
                    <span v-if="fooditem.specfoods[0].original_price" class="original_price">
                      ￥{{fooditem.specfoods[0].original_price}}
                    </span>
                    <div class="add_food">
                      <span v-if="goodsList[index].foods[foodindex].specfoods[0].num" class="recdu" @click="redChoseFood(fooditem.specfoods[0].price,index,foodindex)"> — </span>
                      <span v-if="goodsList[index].foods[foodindex].specfoods[0].num">
                        {{goodsList[index].foods[foodindex].specfoods[0].num}}
                      </span>
                      <span class="radius" @click="addchoseFood(fooditem.specfoods[0].price,index,foodindex)">+</span>
                    </div>
                  </div>
                </div>
              </dd>
          </dl>
      </div>
    </div>
    <!-- 购物车详情 -->
    <div class="goodInfoFooter">
      <p class="reduce">满30减15元，满60减30元，满100减45元，满150减60元</p>
      <div class="shopDetail" v-if="goodstatus && totalnum">
          <div class="shopDetail_header">
            <span>已选商品</span>
            <span @click="clearCar()"><i>□</i>清空</span>
          </div>
          <ul class="con_shopcar">
            <template v-for="(item,index) in getGoodInfo" >
            <li :key="index" v-if="item.name">
              <div class="con_info">
                <span class="con_name">{{item.name}}</span>
                <span class="con_price">￥{{item.price*item.num}}</span>
              </div>
              <div class="add_food">
                      <span v-if="item.num" class="recdu" @click="redChoseFood(item.price,item.index1,item.index2)"> — </span>
                      <span v-if="item.num">
                        {{item.num}}
                      </span>
                      <span class="radius" @click="addchoseFood(item.price,item.index1,item.index2)">+</span>
                    </div>
            </li>
            </template>
          </ul>
      </div>
      <div class="shop">
        <div class="shop_carInfo" @click="StausChange()">

          <div class="shop_car" :class="[totalnum ? 'bgCheng' : '']">
            <i class="iconfont icon-shopcar" :class="[totalnum ? 'bgCheng' : '']"></i>
            <i class="shop_totalNum" v-if="totalnum">{{totalnum}}</i>
          </div>
          <div class="tips">
                <p v-if="allprice">{{allprice}}</p>
                <p v-if="pricetip">{{pricetip}}</p>
                <p>另需配送费3元</p>
          </div>

        </div>
        <router-link to="/topay" v-if='agreePay' class = 'topay'>去结算</router-link>
        <span v-else>{{goPay}}</span>

      </div>

    </div>

  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "book",
  data() {
    return {
      goodsList: [],
      goodstatus: false,
      totalnum: 0,
      goodName: "",
      getGoodInfo: [],
      pricetip:'未选购商品',
      allprice:0,
      goPay:'￥15元起送',
      agreePay:false
    };
  },
  watch: {
    goodsList: {
      handler: function(a, b) {
        // console.log(a);
      },
      deep: true
    }
  },

  methods: {
    getList() {
      axios
        .get("../static/json/goodsInfo.json", {
          params: {}
        })
        .then(result => {
          var res = result.data;
          if (res) {
            // 成功
            // console.log(res);
            var list = res.menu;
            this.goodsList = list;
            // console.log(this.goodsList);
            // console.log(this.goodsList[0].foods[0].specfoods);
            // console.log(fooditem.specfoods)
            // console.log(this.goodsList[0].foods[0].image_path);
          } else {
            alert(1);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

    getImgUrl(item) {
      var str = "";
      var hz = item.image_path.slice(32, 37) == "png" ? "png" : "jpeg";
      str = `//fuss10.elemecdn.com/${
        item.image_path
      }.${hz}?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/`;
      return str;
    },
    StausChange() {
      this.goodstatus = !this.goodstatus;
    },
    addchoseFood(price, index1, index2) {
      var num = this.goodsList[index1].foods[index2].specfoods[0].num;
      if (!num) {
        this.$set(this.goodsList[index1].foods[index2].specfoods[0], "num", 1);
      } else {
        this.$set(
          this.goodsList[index1].foods[index2].specfoods[0],
          "num",
          ++num
        );
      }
      var goodNum = this.goodsList[index1].goodNum;
      if (!goodNum) {
        this.$set(this.goodsList[index1], "goodNum", 1);
      } else {
        this.$set(this.goodsList[index1], "goodNum", ++goodNum);
        // console.log(this.goodsList[index1].goodNum);
      }
      this.totalnum += 1;
      this.saveGoodInfo(index1, index2);
      if(this.totalnum!=0){
        this.pricetip='';
        this.allprice+=price+0.5;
      }else{
        this.pricetip='未选购商品'
      }
       if(this.allprice>=15){
            this.goPay='去结算';
            this.agreePay=true;
        }else{
            this.goPay='还差'+(15-this.allprice)+'元起送';
            this.agreePay=false;
        }


      var localstorage = window.localStorage;
      var goodname = localstorage.getItem("uname");
      var data = JSON.stringify(this.getGoodInfo);
      var ShopInfo = goodname + "goodInfo";
      localstorage.setItem(ShopInfo, data);
    },
    redChoseFood(price, index1, index2) {
      //  this.getGoodInfo.num--;
      var num = this.goodsList[index1].foods[index2].specfoods[0].num;
      if (num) {
        this.$set(
          this.goodsList[index1].foods[index2].specfoods[0],
          "num",
          --num
        );
      }
      this.totalnum -= 1;
      this.saveGoodInfo(index1, index2);
      this.allprice-=(price+0.5);
      if(this.totalnum!=0){
        this.pricetip='';
      }else{
        this.pricetip='未选购商品'
      }
       if(this.allprice>=15){
            this.goPay='去结算';
            this.agreePay=true;
        }else{
            this.goPay='还差'+(15-this.allprice)+'元起送';
            this.agreePay=false;
        }
      var localstorage = window.localStorage;
      var goodname = localstorage.getItem("uname");
      var data = JSON.stringify(this.getGoodInfo);
      var ShopInfo = goodname + "goodInfo";
      localstorage.setItem(ShopInfo, data);
    },
    saveGoodInfo(index1, index2) {
      var newthing = this.getGoodInfo;
      var goods = {};
      var index = 0;
      goods.name = this.goodsList[index1].foods[index2].name;
      goods._id = this.goodsList[index1].foods[index2].item_id;
      goods.num = this.goodsList[index1].foods[index2].specfoods[0].num;
      goods.price = this.goodsList[index1].foods[index2].specfoods[0].price;
      goods.image_path = this.goodsList[index1].foods[index2].image_path;
      // console.log(goods.num);
      goods.index1 = index1;
      goods.index2 = index2;
      newthing.forEach((item, key) => {
        // console.log(this);
        if (item._id == this.goodsList[index1].foods[index2].item_id) {
          index = 1;
          if (this.goodsList[index1].foods[index2].specfoods[0].num == 0) {
            // console.log(this);
            this.getGoodInfo.splice(key, 1);
            return;
          } else {
            item.num = this.goodsList[index1].foods[index2].specfoods[0].num;
            return;
          }
        }
      });
      if (index == 0) {
        newthing[newthing.length] = goods;

        // console.log(newthing.length);
      }
    },
    clearCar() {
      var goodArr = this.getGoodInfo;
      goodArr.forEach((item, index) => {
        this.$set(
          this.goodsList[item.index1].foods[item.index2].specfoods[0],
          "num",
          0
        );
        this.$set(
          this.goodsList[item.index1],
          "goodNum",
          0
        );
      });
      this.pricetip='未选购商品';
      this.allprice=0;
      this.totalnum = 0;
      this.goodNum=0;
      this.agreePay=false;
      this.goPay='￥15元起送';
      var localstorage = window.localStorage;
      var goodname = localstorage.getItem("uname");
      var data = JSON.stringify(this.getGoodInfo);
      var ShopInfo = goodname + "goodInfo";
      localstorage.setItem(ShopInfo, "[]");
      // console.log(this.goodsList);
      // this.location='localhost:8080/#/goodsinfo/book'
    }
  },
  mounted() {
    this.getList();
  }
};
</script>

<style scoped>
.topay{
  display: block;
  width:1.04rem;
  color:#fff;
  text-align: center;
  line-height:0.5rem;
  background-color:#38ca73;
}
.banner {
  height: 0.95rem;
  padding: 0.05rem 0.15rem;
  border-top: 1px solid #ededed;
  box-sizing: border-box;
}
.detail {
  display: flex;
  box-sizing: border-box;
  height: 6.6rem;
}
/* 左侧导航 */
.menu {
  width: 1rem;
  overflow-y: auto;
  height: 100%;
  position: relative;
}
.menu li {
  padding: 0.15rem 0.2rem;
  box-sizing: border-box;
  display: flex;
  position: relative;
}
.menu img {
  width: 0.13rem;
  height: 0.13rem;
  margin-right: 0.05rem;
  vertical-align: middle;
  margin-top: 0.02rem;
}
.menu span {
  display: block;
  width: 0.6rem;
  text-align: left;
  align-items: center;
}
.menu .icon_num {
  width: 0.15rem;
  height: 0.15rem;
  text-align: center;
  border-radius: 50%;
  line-height: 0.15rem;
  font-size: 0.08rem;
  background: #ff4915;
  display: block;
  position: absolute;
  color: #ffffff;
  left: 0.75rem;
  top: 0.8em;
}
/* 商品详情 */
.scroll {
  height: 100%;
  overflow-y: auto;
}
.detail_right {
  width: 100%;
}
.detail_right dt {
  text-align: left;
  padding: 0.1rem 0;
  width: 100%;
  display: flex;
}
.detail_right dt span:first-of-type {
  font-weight: bold;
  margin-right: 0.1rem;
}
.detail_right dt .description {
  color: #999;
  width: 2rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.detail_right dd {
  padding: 0.1rem 0;
  display: flex;
}
.detail_right dd img {
  width: 0.95rem;
  height: 0.95rem;
}
.detail_right dd .food_list {
  width: 100%;
  /* background: pink; */
  padding-left: 0.1rem;
  text-align: left;
}
.food_list h3 {
  width: 1.5rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.food_list p {
  color: #888;
}
/* 添加订单 */
.food_list_add {
  padding-top: 0.25rem;
  width: 100%;
  padding-right: 0.1rem;
}
.food_list_add .price {
  color: red;
  font-size: 0.18rem;
}
.food_list_add .price b {
  font-size: 0.14rem;
  margin-right: -0.03rem;
}
.original_price {
  color: #888;
  font-size: 0.12rem;
  margin-left: -0.05rem;
  letter-spacing: -0.01rem;
}
.add_food {
  /* width: 0.9rem; */
  float: right;
  display: flex;
  margin-left: 0.18rem;
}
.add_food span {
  float: left;
  display: inline-block;
  width: 0.22rem;
  height: 0.22rem;
  line-height: 0.22rem;
  text-align: center;
}
.add_food span:nth-of-type(2) {
  margin: 0 0.03rem;
}
.radius {
  border-radius: 50%;
  background: #2396ff;
  color: #ffffff;
  font-size: 0.2rem;
}
.recdu {
  border-radius: 50%;
  color: #2396ff;
  border: 0.01rem solid #2396ff;
  font-size: 0.1rem;
  font-weight: 700;
}
/* 底部 */
.goodInfoFooter {
  position: fixed;
  bottom: 0;
  width: 100%;
}
.goodInfoFooter .reduce {
  height: 0.2rem;
  line-height: 0.2rem;
  color: #333;
  background: #fffad6;
  border-top: 0.01rem solid #f9e8a3;
  font-size: 0.1rem;
  text-align: center;
}
.shop {
  width: 100%;
  display: flex;
  height: 0.5rem;
  background-color: rgba(61, 61, 63, 0.9);
}
.shop_carInfo {
  width: 2.7rem;
}
.shop_car {
  width: 0.5rem;
  height: 0.5rem;
  text-align: center;
  border-radius: 50%;
  position: fixed;
  bottom: 0.1rem;
  left: 0.15rem;
  background-color: rgba(61, 61, 63, 0.9);
}
.shop_car i {
  width: 0.4rem;
  height: 0.4rem;
  text-align: center;
  line-height: 0.4rem;
  border-radius: 50%;
  background: #363636;
  display: inline-block;
  margin: 0.05rem auto;
  color: #999;
  font-size: 0.3rem;
}
.shop .tips {
  margin-left: 0.8rem;
  color: #999;
  font-size: 0.12rem;
  margin-top: 0.05rem;
}
.shop span {
  display: block;
  width: 1rem;
  height: 100%;
  text-align: center;
  color: white;
  font-size: 0.16rem;
  line-height: 0.5rem;
  letter-spacing: -0.01rem;
  font-weight: bold;
}
.shopDetail {
  /* height: 2rem; */
  width: 100%;
  /* background: #2396ff; */
  box-sizing: border-box;
}
.shopDetail .shopDetail_header {
  height: 0.4rem;
  background: #eceff1;
  width: 100%;
  display: flex;
  justify-content: space-between;
  line-height: 0.4rem;
  color: #999;
  padding: 0 0.15rem;
}
.shopDetail .shopDetail_header span:first-of-type {
  font-size: 0.16rem;
}
.shopDetail .shopDetail_header span:last-of-type {
  font-size: 0.14rem;
}
.shopDetail .shopDetail_header span:last-of-type i {
  font-size: 0.2rem;
  margin-right: 0.03rem;
}
.shop_car .shop_totalNum {
  width: 0.17rem;
  height: 0.17rem;
  color: #ffffff;
  font-size: 0.1rem;
  line-height: 0.2rem;
  text-align: center;
  position: absolute;
  bottom: 0.3rem;
  z-index: 10;
  left: 0.35rem;
  background: #ff4915;
}
.bgCheng {
  background: #2396ff !important;
  color: #ffffff !important;
}
.con_shopcar {
  padding: 0rem 0.15rem;
  background: #fff;
}
.con_shopcar li {
  border-bottom: 0.01rem solid #cccccc;
  height: 0.5rem;
  width: 100%;
  display: flex;
  justify-content: space-around;
  line-height: 0.5rem;
  font-size: 0.16rem;
  align-items: center;
}
.con_shopcar {
}
.con_info {
  width: 60%;
  display: flex;
  justify-content: space-between;
  text-align: left;
}
.con_shopcar li .con_price {
  font-size: 0.16rem;
  color: #ff4915;
}
</style>

